<template>
	<div>
		<header>
			<Header>
				<div slot="left" class="left" @click="backClick"></div>
				<div slot="center" class="center">购物车</div>
			</Header>
		</header>
		
		<section>
			<div class="login">
				<span class="login-tips">登录后将同步您的购物车商品</span>
				<a class="login-btn" href="">登录</a>
			</div>
			<div class="emptycart">
				<img class="img" src="@/assets/img/cart/m_shopping_empty_cart.png" alt="">
				<p class="text">购物车内暂时没有商品</p>
				<a class="home" href="/">去逛逛</a>
			</div>
			<div class="guess">
				<div class="guess-title">猜你喜欢</div>
			</div>
		</section>
		
    <Tabbar></Tabbar>
	</div>
</template>

<script>
import Header from "@/components/Cart/Header.vue"
import Tabbar from "@/components/common/Tabbar.vue";

export default {
  name: "Cart",
  components: {
		Header,
    Tabbar,
  },
	methods: {
		backClick() {
			this.$router.back();
		}
	}
};
</script>

<style scoped lang="scss">
	header {
		.left {
			height: 0.32rem;
			width: 0.32rem;
			border: 1px solid;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			border-style: solid;
		  border-width: 0.04rem 0 0 0.04rem;
			margin-left: 0.453333rem;
			margin-top: 0.373333rem;
		}
		
		.center {
			font-size: 0.426666rem;
		}
	}
	
	.login {
		height: 0.96rem;
		line-height: 0.96rem;
		text-align: center;
		background: #fff0ec;
		border: 0.053333rem solid rgba(255, 115, 76, 0.2);
		.login-tips {
			font-size: 0.346666rem;
			line-height: 0.96rem;
			text-align: center;
		}
		.login-btn {
			display: inline-block;
			margin-left: 0.533333rem;
			width: 1.76rem;
			height: 0.693333rem;
			line-height: 0.693333rem;
			text-align: center;
			border-radius: 1.92857143rem;
			border: 0.026666rem solid #ff734c;
			color: #FF734C;
			font-size: 0.346666rem;
			cursor: pointer;
		}
	}

	.emptycart {
		height: 5.333333rem;
		text-align: center;
		padding: 0.933333rem;
		background-color: #fff;
		border-bottom: 0.266666rem solid #e9ecf0;
		.img {
			width: 3.386666rem;
			height: 2.613333rem;
			vertical-align: center;
		}
		.text {
			font-size: 0.346666rem;
			margin-top: 0.586666rem;
		}
		.home {
			font-size: 0.346666rem;
			font-weight: 700;
			color: #fff;
			display: inline-block;
			margin-top: 0.266666rem;
			width: 3.093333rem;
			height: 0.746666rem;
			line-height: 0.746666rem;
			background-color: #FF734C;
		  border-radius:2rem;
		}
	}
	
	.guess {
		.guess-title {
			font-size: 0.426666rem;
			height: 1.493333rem;
			line-height: 56px;
			padding: 0 0.4rem;
		}
	}
</style>
